<!doctype html>
<html lang="en" ng-app="book">

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta charset="utf-8">

  <title>AngularJS Sample Demo</title>
  
  <link href='http://fonts.googleapis.com/css?family==Noto+Sans|Gloria+Hallelujah' rel='stylesheet' type='text/css'>

  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">

  <!-- FOR JQUERY UPLOAD -->
  <link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css">
  <link rel="stylesheet" href="http://blueimp.github.com/Bootstrap-Image-Gallery/css/bootstrap-image-gallery.min.css">
  <link rel="stylesheet" href="lib/jquery-upload/css/jquery.fileupload-ui.css">
  <noscript><link rel="stylesheet" href="lib/jquery-upload/css/jquery.fileupload-ui-noscript.css"></noscript>

  <!-- JQUERY UI CSS (calendar) -->
  <link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css">

  <!-- FOR GOOGLE CHARTS -->
  <script src="//www.google.com/jsapi"></script>


  <!-- CORE MIRROR -->
   <link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
   <link rel="stylesheet" href="lib/codemirror/theme/ambiance.css">
<!--   <link rel="stylesheet" href="css/foundation.css"> -->
  
  <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
  


  <script src="lib/ace/ace.js"></script>
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
   <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
   <script src="http://code.angularjs.org/1.1.4/angular.js"></script>
   <script src="http://code.angularjs.org/1.1.4/angular-resource.js"></script>
  <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>

  <script type="text/javascript" src="lib/codemirror/lib/codemirror.js"></script>
  <script type="text/javascript" src="lib/codemirror/addon/fold/foldcode.js"></script>
  <script type="text/javascript" src="lib/codemirror/addon/fold/xml-fold.js"></script>
  <script type="text/javascript" src="lib/codemirror/addon/fold/brace-fold.js"></script>

 <script src="lib/tiny_mce/jquery.tinymce.js"></script>

   <!--     <script src="http://fiddle.tinymce.com/tinymce/3.5.4.1/jquery.tinymce.js"></script>-->
  <script src="lib/tiny_mce/tiny_mce_src.js"></script>





  <script type="text/javascript" src="lib/angular_extra/ng-grid.js"></script>
  
  <script type="text/javascript" src="lib/angular_extra/ui-bootstrap-custom-0.4.0-SNAPSHOT.min.js"></script>

  <script type="text/javascript" src="lib/angular_extra/angular-ace.js"></script>
  <script type="text/javascript" src="lib/angular_extra/ng-google-chart.js"></script>

  <script type="text/javascript" src="lib/angular_extra/ui-codemirror.js"></script>

  <script type="text/javascript" src="lib/angular_extra/sortable.js"></script>


  <script type="text/javascript" src="js/app.js"></script>
  <script type="text/javascript" src="js/directives.js"></script>
  <script type="text/javascript" src="js/controllers.js"></script>
  <script type="text/javascript" src="js/controllers/TodosCtrl.js"></script>
  <script type="text/javascript" src="js/controllers/BlogCtrl.js"></script>
  <script type="text/javascript" src="js/controllers/BlogAddCtrl.js"></script>
  <script type="text/javascript" src="js/controllers/BlogReadItem.js"></script>
  <script type="text/javascript" src="js/controllers/TimeTrackingCtrl.js"></script>
  <script type="text/javascript" src="js/controllers/SharedCtrl.js"></script>
  <script type="text/javascript" src="js/Services.js"></script>
  <script type="text/javascript" src="js/Events.js"></script>



  <!-- JQUERY UPLOAD -->

<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="lib/jquery-upload/js/vendor/jquery.ui.widget.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script>
<!-- Bootstrap JS and Bootstrap Image Gallery are not required, but included for the demo -->
<script src="http://blueimp.github.com/cdn/js/bootstrap.min.js"></script>
<script src="http://blueimp.github.com/Bootstrap-Image-Gallery/js/bootstrap-image-gallery.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="lib/jquery-upload/js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="lib/jquery-upload/js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="lib/jquery-upload/js/jquery.fileupload-process.js"></script>
<!-- The File Upload image resize plugin -->
<script src="lib/jquery-upload/js/jquery.fileupload-resize.js"></script>
<!-- The File Upload validation plugin -->
<script src="lib/jquery-upload/js/jquery.fileupload-validate.js"></script>
<!-- The File Upload Angular JS module -->
<script src="lib/jquery-upload/js/jquery.fileupload-angular.js"></script>
<!-- The main application script -->
<script src="lib/jquery-upload/js/app.js"></script>



<!--  inlined template for the component -->



</head>

 <!--
    <select ng-model="selectedOwner"
            ng-change="getOwner($index)" >
                       <option value=""></option>
      <option ng-repeat="user in users"
              ng-selected="{{user.id == owner}}"
              >{{user.displayedName}} ( {{user.id}})</option>
    </select>
 <label>=>>>>>{{selectedOwner}}</label>
   
   
    <select ng-model="model.ownerName"
            ng-change="getOwner();" >
      <option ng-repeat="user in users">{{user.displayedName}}</option>
    </select>
   -->



<!--  <input type="text" ng-model="value" ng-show="editMode" ng-model-instant ng-enter="editMode=false" ng-change="onChangeInputText(); model = value" style="width: 300px"
    placeholder="Add your text"/>-->




<body>
      <!--  <div style="background-color:#ff0000; width: 100px; height: 20px"></div> -->
  <!-- FOUNDATION TOP BAR  -->
  <div id="TopBar"  ng-controller="TopNavigationBarCtrl"
  style="background-color: #222; height: 40px; top: 0px">

    <div style="float:right; width: 200px">

      <!-- <img src="images/icon/white/Configuration.png" 
        style="cursor:pointer; margin-top: -10px;"  class="cmsIcon"
        tooltip-placement="bottom" tooltip="Project Settings">

       <label style="float:left; color:#ccc; padding-right: 20px; padding-top: 10px" >Collaborative </label> -->


    </div>


    <!-- ADD MENU -->
    <div class="dropdown" ng-controller="DropdownCtrl" 
    style="padding-top: 10px; padding-left: 0px; float:left; max-width: 150px">
   

      <a class="dropdown-toggle" style="width:40px">
         <img src="images/icon/white/Weather-sun.png" 
         style="cursor:pointer; margin-top: -14px">
      </a>
      <ul class="dropdown-menu">
        <li ng-repeat="choice in items">
          <a ng-href="{{choice.url}}">{{choice.label}}</a>
        </li>
      </ul>
    </div>

    


    <!-- RECENT ACTIVITIES -->
    <div class="dropdown" ng-controller="ProjectsMenuCtrl" 
    style="padding-top: 10px; float:left; max-width: 150px ">
   

      <a class="dropdown-toggle" >
         <img src="images/icon/white/Align-justify.png" style="cursor:pointer; margin-top: -14px">


      </a>

      <div class="dropdown-menu text-center" ng-controller="MyCtrl">
        <h5 class="titleSpecial" style="font-size: 1.3em">Recent Threads</h5>

        <div ng-grid="gridOptions" class="gridStyle"
         style="width: 400px; height: 200px; border-bottom: 1px solid #ccc; margin-bottom: 5px"></div>
        <a href="#/dashboard">Go to Dashboard</a>

      </div>


      <!-- <ul class="dropdown-menu">
        <li ng-repeat="choice in items">
          <a ng-href="{{choice.url}}">{{choice.label}}</a>
        </li>
      </ul> -->
    </div>

        <span class="topBarNotificationBox" style="">3</span>
<!-- 
    <div class="topBarNotificationBox"
     style="float:left;  ">
      <span>1</span>
    </div>

 -->
    
    <!-- SETTINGS -->
    <a href="#/settings">
     <img src="images/icon/white/Tools.png" style="cursor:pointer; margin-top: -3px; float:right;">
     </a>


    <!-- SELECT CLIENT -->
    <div class="dropdown" ng-controller="ProjectsMenuCtrl" 
    style="padding-top: 10px;  float:right; max-width: 150px; ">
      

      <a class="dropdown-toggle">
         <img src="images/icon/white/Diagram.png" style="cursor:pointer; margin-top: -14px">
      </a>
      <ul class="dropdown-menu" style="left: -270px; width: 300px">
        <li ng-repeat="choice in items">
          <a ng-href="{{choice.url}}">{{choice.label}}</a>
        </li>
      </ul>
    </div>

    <!-- PROJECTS NAME -->
    <span class="titleSpecial hidden-phone" style="margin-top: 5px; float:right; color: #fff; font-size: 1em">
      ZEUS - Digital Lighting</span>

    <!--  <div
    style="padding-top: 10px; float:left;">
     <img src="images/icon/white/Alien.png" 
          style="cursor:pointer; margin-top: -14px"
          popover-placement="bottom" popover="On the Bottom!"
          >
          sacs
    
     </div> -->

<!-- 
    
       <div class="dropdown" ng-controller="ProjectsMenuCtrl" 
            style=" ">
   

        <a class="dropdown-toggle">
           <img src="images/icon/white/Configuration.png" style="cursor:pointer; margin-top: -14px; ">
        </a>
        <ul class="dropdown-menu">
          <li ng-repeat="choice in items">
            <a ng-href="{{choice.url}}">{{choice.label}}</a>
          </li>
        </ul>
      </div> -->
 
  </div>
  <!-- End Top Bar -->



  <!-- VIEW CONTAINER -->
    <div id="wrap">
     <div ng-view style="padding-left:20px; padding-right:20px" ></div>
    </div>


  <script>
  document.write('<script src=lib/vendor/' +
  ('__proto__' in {} ? 'zepto' : 'jquery') +
  '.js><\/script>')
  </script>
  <script src="lib/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>


  <!-- End Footer -->
</body>
</html>
